<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="600px"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    title="规则"
  >
    <template v-slot:dialogMain>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
          <el-form-item label="规则名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="">
            <div class="group-box" v-for="(it,i) in ruleForm.groupList">
              
              <el-select v-model="it.region">
                <el-option
                  v-for="(its, ix) in state.fieldList"
                  :key="ix"
                  :label="its.label"
                  :value="its.value"
                />
              </el-select>
              <el-select v-model="it.region">
                <el-option
                  v-for="(its, ix) in state.conditionList"
                  :key="ix"
                  :label="its.label"
                  :value="its.value"
                />
              </el-select>
              <el-input v-model="it.name" />
              <el-color-picker v-model="state.colorVal" />
              <el-icon :size="20" @click="delGroup(i)"><Delete /></el-icon>
            </div>
            <el-button type="primary" @click="addGroup">新增规则</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import dialogBox from "@/components/dialog-box/index.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import { type ComponentSize, type FormInstance, type FormRules, ElMessage } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
const myDialog = ref(null);

const ruleFormRef = ref<FormInstance>();

const emit = defineEmits(['sureHandle'])

const ruleForm = ref({
  name: "",
  comp: "",
  region: "",
  groupList: []
});

let state = reactive({
  fieldList: [
    { label: "字段值1", value: 1 },
    { label: "字段值2", value: 2 },
    { label: "字段值3", value: 3 },
  ],
  conditionList: [
    {
      value: "1",
      label: "小于",
    },
    {
      value: "2",
      label: "大于",
    },
    {
      value: "3",
      label: "等于",
    }
  ],
  groupList: [],
  colorVal: '#FB1E05'
});
const addGroup = () => {
  let obj = {

  }
  ruleForm.value.groupList.push(obj)
}
const delGroup = (i) => {
  ruleForm.value.groupList.splice(i,1)
}

// 定义完成后，用defineExpose()暴露给父组件
const open = (data: any) => {
  resetForm();
  if(data){
    console.log(data, '111')
    ruleForm.value = Object.assign({},{...data});
  }
  myDialog.value.handleOpen();
};
const close = () => {
  myDialog.value.handleClose();
};
const sureHandle = () => {
  submitForm();
};
defineExpose({
  open,
  close,
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  await ruleFormRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(Object.assign({},{...ruleForm.value}), "submit!");
      // console.log(toRefs(ruleForm), "submit!");
      ElMessage({
        type: "success",
        message: state.title + "成功!",
      });
      emit('sureHandle',Object.assign({},{...ruleForm.value}))
      close()
    }
  });
};

const resetForm = () => {
  if (!ruleFormRef) return;
  state.groupList = []
  ruleFormRef.value?.resetFields();
};
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请选择字段", trigger: "blur" },
  ],
  comp: [
    { required: true, message: "请选择类型", trigger: "blur" },
  ],
  region: [
    { required: true, message: "请选择数据来源", trigger: "blur" },
  ],
});
</script>

<style lang="scss" scoped>
.group-box{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
</style>
